import 'package:flutter/material.dart';

class SignupPage extends StatefulWidget {

  const SignupPage({super.key});

  @override
  State<SignupPage> createState() => _SignupPageState();
}

class _SignupPageState extends State<SignupPage> {

  var isPasswordVisible = false;
  var isPasswordVisible2 = false;
 
  @override
  Widget build(BuildContext context) {
    
  var title =  Container(
      color: Colors.transparent, // Set the color to transparent
      padding: const EdgeInsets.fromLTRB(16, 100, 16, 16), // Add top padding of 100
      child: const Text(
        'Sign Up',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black, // Set the text color to black
          fontSize: 32,
          fontWeight: FontWeight.bold,
        ),
      ),
    );

    var fullnameRect = Container(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
      child: const Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Full Name',
              prefixIcon: Icon(Icons.person),
              border: OutlineInputBorder(), // Add border to the TextField
            ),
          ),
        ],),
    );

    var emailRect = Container(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
      child: const Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Email',
              prefixIcon: Icon(Icons.email),
              border: OutlineInputBorder(), // Add border to the TextField
            ),
          ),
        ],),
    );

    var passwordRect = Container(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
      child:  Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Password',
              prefixIcon: const Icon(Icons.lock),
              suffixIcon: IconButton(
                icon: const Icon(Icons.visibility),
                onPressed: () {
                  setState(() {
                    isPasswordVisible = !isPasswordVisible;
                  });
                },
              ),
              border:const OutlineInputBorder(), // Add border to the TextField
            ),
            obscureText: isPasswordVisible,
          ),
        ],
      ),
    );

    var cpRect = Container(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
      child:  Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Confirm Password',
              prefixIcon: const Icon(Icons.lock),
              suffixIcon: IconButton(
                icon: const Icon(Icons.visibility),
                onPressed: () {
                  setState(() {
                    isPasswordVisible2 = !isPasswordVisible2;
                  });
                },
              ),
              border:const OutlineInputBorder(), // Add border to the TextField
            ),
            obscureText: isPasswordVisible2,
          ),
        ],
      ),
    );
    
    var signupButton = Container(
      padding: const EdgeInsets.all(20),
      child: ElevatedButton(
        onPressed: () {
          // Add your login logic here
        },
        child: const Text('Sign Up'),
      ),
    );

    var loginText = Container(
      padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            "Already have an account?",
            style: TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 10),
            child: 
            GestureDetector(
              onTap: () {
                // Add your navigation logic here
                setState(() {
                    Navigator.pop(context);
                    Navigator.pop(context);
                });
              },
              child: const Text(
                "Login",
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ), 
          ),
        ],
      ),
    );

    return Scaffold(
      body:Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                title,
                fullnameRect,
                emailRect,
                passwordRect,
                cpRect,
                signupButton,
                loginText,
              ],
            ),
          ),
        ],
      )

    );
  }
}